<!-- 所有的宠物信息 -->
<template>
  <div class="pet-all-info">
    <nav-bar class="navbar">
      <template v-slot:left>
        <img src="~assets/img/navbar/left_arrow.svg" @click="petAllInfoOut" />
      </template>
      <template v-slot:center>
        <h3>我的宠物</h3>
      </template>
    </nav-bar>

    <pet-info-slot 
    v-for="item in petProfiles" 
    :key="item.id"
    :gender="item.gender">
      <template v-slot:pet-photo>
        <img src="~assets/img/profile/dog2.jpg" alt="" class="pet-photo" />
      </template>
      <template v-slot:pet-name> {{ item.name }} </template>
      <template v-slot:breed-gender>
        {{ item.breed }}-{{ item.gender === 1 ? '弟弟' : '妹妹' }}
        </template>
      <template v-slot:pet-age> 年龄：1岁 </template>
      <template v-slot:pet-ster>
        绝育情况：{{ item.sterilization === 1 ? '未绝育' : '已绝育' }}
        </template>
    </pet-info-slot>

    <div class="pet-add-icon">
      <img src="~assets/img/profile/addInfoIcon.svg" alt="" />
      <div>添加宠物</div>
    </div>
  </div>
</template>

<script>
import NavBar from "common/navbar/NavBar.vue";
import PetInfoSlot from "./PetInfoSlot";

export default {
  name: "PetAllInfo",
  components: {
    NavBar,
    PetInfoSlot,
  },
  data() {
    return {
      petProfiles: [
        {
          id: 1,
          petPhoto: "petDefault.jpg",
          name: "Liqi",
          gender: 1,
          breed: "金毛",
          birthday: "",
          sterilization: 0,
        },
        {
          id: 2,
          petPhoto: "petDefault.jpg",
          name: "皮杜",
          gender: 0,
          breed: "家猫",
          birthday: "",
          sterilization: 1,
        },
      ],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods: {
    petAllInfoOut() {
      this.$emit("petAllInfoOut");
    },
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>

<style scoped>
.navbar img {
  width: 25px;
  height: 25px;
}
.navbar h3 {
  text-align: center;
}
.pet-all-info {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 100;
}
.pet-photo {
  width: 100%;
}
.pet-add-icon {
  position: relative;
  margin: 40px auto;
  text-align: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(100, 100, 100, 0.2);
}
.pet-add-icon img {
  width: 30px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.pet-add-icon div {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  font-size: 14px;
}
</style>